<template>
    <div>


        <div class="slba-container">
            <div class="slba-header">
                <div class="tj">

                    <div class="tj-right">
                        <van-search left-icon="" shape="round" background="none" v-model="tiaojian" right-icon="search"
                            placeholder="请输入搜索关键词" @click-right-icon="onSearch" />
                    </div>

                </div>

                <div style="margin-top: 12px;">
                </div>

            </div>

            <div class="slba-content">
                <van-pull-refresh v-model="loading" @refresh="onRefresh">
                    <van-list :loading="loading" :finished="finished" finished-text="已经到底了" class="c-dab-list">

                        <div v-for="(item, index) in tableData" :key="index" class="list-container"
                            @click="itemClick(item)">
                            <div class="item-name">
                                <span class="item-name-title">
                                    {{ item.ApplyCompanyName }}
                                </span>
                                <van-icon name="arrow" />
                            </div>
                            <div class="item-content">
                                <div class="item-content-name">
                                    <span class="item-content-name-title">
                                        发证机关
                                    </span>
                                    <span class="item-content-name-content">
                                        {{ item.RegionID }}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </van-list>
                </van-pull-refresh>
            </div>
        </div>

        <van-calendar v-model:show="showStart" :default-date="startDate" switch-mode="year-month"
            @confirm="onStartConfirm" />

        <van-calendar v-model:show="showEnd" :default-date="endDate" switch-mode="year-month" @confirm="onEndConfirm" />
    </div>
</template>

<script setup>
import { ref, onMounted, watch, nextTick, onBeforeUnmount, onUnmounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import uiUtil from "@/util/UiUtil.js";
const tableData = ref([]);
const router = useRouter();
const route = useRoute();
const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);
const showStart = ref(false);
const showEnd = ref(false);
const startDate = ref({});
const endDate = ref({});
const tiaojian = ref('');
const type = ref({})
endDate.value = new Date();
const currentDate = new Date();
currentDate.setMonth(currentDate.getMonth() - 3);
startDate.value = currentDate
let user = JSON.parse(localStorage.getItem(uiUtil.urlPath.keys.user))
function getDate(date) {
    const year = date.getFullYear();
    const month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份从 0 开始
    const day = date.getDate().toString().padStart(2, '0');
    return `${year}-${month}-${day}`;
}
function onEndConfirm(date) {
    showEnd.value = false
    endDate.value = date
    props.dataValue.EndDate = getDate(date)
    onRefresh()
}
function onStartConfirm(date) {
    showStart.value = false
    startDate.value = date
    props.dataValue.StartDate = getDate(date)
    onRefresh()
}
function onSearch() {

    onRefresh()
}
const props = defineProps({
    dataValue: {
        type: Object,
        default: {}
    },
});

watch(() => props.dataValue, (newShow) => {
    init();
});
onMounted(() => {
    init();
})
const init = () => {
    // console.log(props.dataValue);

    if (props.dataValue.StartDate) {
        // console.log('dataValue.StartDate', props.dataValue.StartDate);
        startDate.value = new Date(props.dataValue.StartDate)
    }
    if (props.dataValue.EndDate) {
        // console.log('dataValue.EndDate', props.dataValue.EndDate);
        endDate.value = new Date(props.dataValue.EndDate)
    }
    getData()
}

const onRefresh = () => {
    getData()
}
const getData = async () => {
    getDataList()
};
const onLoad = async () => {
    getData()
};
const getDataList = async () => {

    const params = {
        ApplyCompanyName: tiaojian.value,
    }
    uiUtil.http().getObj({
        url: uiUtil.urlPath.getAppSeedEnterpriseVO,
        data: params,
        start: () => {
            uiUtil.toastLoading()
            if (refreshing.value) {
                refreshing.value = false;
            }
        },
        succeed: (res) => {
            // loading.value = false;
            // debugger
            // console.log('1ucceed=', res)
            if (!res || !res.code || 200 != res.code) {
                uiUtil.toastFail(res.msg)
                return
            }
            if (!res.data) {
                // 如果返回数据为空，表示已加载完成
                finished.value = true;
                uiUtil.toastClose()
                return;
            }

            if (res.data.length > 0) {
                tableData.value = res.data
            } else {
                tableData.value = []
            }
            uiUtil.toastClose()

        },
        failed: (res) => {
            // debugger
            console.log('failed=', res)
            // showFailToast('添加失败')
            uiUtil.toastFail('添加失败')
        },
        finish: () => {
            uiUtil.toastClose()
            loading.value = false;
        }
    })
};
function itemClick(item) {

    router.push({
        path: uiUtil.routerPath.QiYeBeiAnDanListPage,
        query: { ...item }
    })
}
</script>

<style scoped>
.slba-container {
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: auto;
}

.slba-header,
.slba-footer {
    flex: 0 0 auto;
    text-align: center;
    padding: 0;
    overflow: auto;
    margin: 0 12px;
}

.slba-content {
    flex: 1 1 auto;
    overflow-y: auto;
    margin: 0 12px;
}

.c-dab-list {
    padding-bottom: 200px;
}

.list-container {
    background-color: #fff;
    border-radius: 4px;
    padding: 3px 12px;
    min-height: 50px;
    margin-top: 12px;

}

.item-name {
    margin-top: 6px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 12px 0;
}

.item-name-title {
    flex: 1;
    font-size: 13px;
    font-weight: bold;
    color: #222;
}

.item-content {
    padding: 0 12px;
    background-color: #F9F9F9;
    margin-bottom: 12px;
}

.item-content-name {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 12px 0;
}

.item-content-name-title {
    flex: 1;
    font-size: 12px;
    color: #888;
}

.item-content-name-content {
    flex: 3;
    font-size: 12px;
    color: #222;
}

.text-align-left {
    text-align: left
}

.text-align-right {
    text-align: right
}

.tj {
    display: inline;
    display: flex;
}

.tj-left {
    margin-top: 12px;
}

.tj-right {
    margin-top: 2px;
    flex: 1;
    height: 35px;
    --van-search-content-background: #fff;
}

.tj-right-input {
    background: none;
    width: 100px;
}
</style>